import React, { useState, useEffect } from 'react'
import reactDom from 'react-dom'

// class Demo extends React.Component {
//   state = {
//     count: 0
//   }
//   add = () => {
//     this.setState({ count: this.state.count + 1 })
//   }
//   unmount = () => {
//     reactDom.unmountComponentAtNode(document.getElementById("root"))
//   }
//   //数据更新时触发
//   componentDidUpdate(){
//     console.log('1111')
//   }
//   componentDidMount() {
//     this.timer = setInterval(() => {
//       this.setState(state => ({ count: state.count + 1 })
//       )
//     }, 1000)
//   }
//   componentWillUnmount() {
//     clearInterval(this.timer)
//   }
//   render() {
//     return (
//       <div>
//         <h1>当前求和为：{this.state.count}</h1>
//         <button onClick={this.add} className="btn btn-primary">点我加1</button>
//         <button onClick={this.unmount} className="btn btn-primary">卸载组件</button>
//       </div>
//     )
//   }
// }


function Demo() {
  //hook是react16.8的新增特性。它可以让你在不编写class的情况下
  //使用state以及其它的特性
  const [count, setCount] = useState(0)
  const [name, setName] = useState('tom')
  function add() {
    // setCount(count+1) //第一种写法
    //setCount(oldValue=>newValue)接收一个旧的值，返回一个新的值
    setCount(() => count + 1) //第二种写法
  }
  function changeName() {
    setName("jack")
  }

  function unmount() {
    reactDom.unmountComponentAtNode(document.getElementById("root"))
  }
  //相当于声明周期的两个钩子
  //1、componentDidMount
  //2、componentDidUpdate
  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000);
    //返回一个函数 相当于componentWillUnmount钩子
    return () => {
      clearInterval(timer)
    }
  }, [])//需要监听的数据数组[count, name]
  return (
    <div>
      <h1>当前求和为：{count}</h1>
      <h1>当前名字为：{name}</h1>
      <button onClick={add} className="btn btn-primary">点我加1</button>
      <button onClick={changeName} className="btn btn-primary">改变名字</button>
      <button onClick={unmount} className="btn btn-primary">卸载组件</button>
    </div>
  )
}


export default Demo